<template>
  <div class="submit-success">
    <div class="main">
      <img
        class="mt-40 w-120"
        src="@/assets/img/success.png"
        alt=""
        srcset=""
      />
      <div class="mt-20 mb-10">商家已接单</div>
      <div class="mg-20 mb-40 fz-12 c-999">魔术，鲜花等增值服务，请点击升级服务</div>

      <div class="footer">
        <!-- <van-button class="btn mr-15" plain round @click="onGoHome"
          >继续预订</van-button
        > -->
        <van-button
          class="btn mr-15"
          plain
          round
          @click="onViewOrder"
        >查看订单</van-button
        >
        <van-button
          class="btn "
          plain
          round
          type="danger"
          @click="upgradeService"
        >升级服务</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import { useRoute, useRouter } from "vue-router";
import store from "@/store";

export default defineComponent({
  setup() {
    const channelId = localStorage.getItem("channelId") || "";
    console.log(store);
    const router = useRouter();
    const route = useRoute();
    const orderId = route.query.orderId || ''
    const onViewOrder = () => {
      router.push({
        path: "/order/detail",
        query: {id: orderId}
      });
    };
    const onGoHome = () => {
      router.push({
        path: "/home",
        query: { channel: channelId, clearCode: true },
      });
    };
    const upgradeService = () => {
      window.location.href = 'https://j.youzan.com/qSc_x1'
    }
    return {
      onViewOrder,
      onGoHome,
      upgradeService
    };
  },
});
</script>

<style lang="less" scoped>
.submit-success {
  height: 100vh;
  background: #f4f3f3;
  padding: 15px;
  .main {
    background: #fff;
    text-align: center;
    .footer {
      display: flex;
      padding: 32px 6px;
      border-top: 1px solid #f4f3f3;
      .btn {
        flex: 1;
      }
    }
  }
}
</style>
